<template>
  <div class="pageDetail">
    <el-form
      ref="formRef"
      class="form_item_w2"
      :model="formData"
      :rules="rules[researchTypeId]"
      label-width="120px"
    >
      <!-- 动态渲染表单字段 -->
      <el-form-item
        v-for="(field, index) in fields[researchTypeId]"
        :class="field.type === 'textarea' ? 'item_w1' : ''"
        :key="index"
        :label="field.label"
        :prop="field.required?field.prop:''"
      >
        <!-- 输入框 -->
        <el-input
          v-if="field.type === 'input'"
          v-model="formData[field.prop]"
          :placeholder="'请输入' + field.label"
          :maxlength="field.maxlength || 200"
          :disabled="disabled"
        ></el-input>
        
        <!-- 文本域 -->
        <el-input
          v-if="field.type === 'textarea'"
          type="textarea"
          v-model="formData[field.prop]"
          :placeholder="'请输入' + field.label"
          :disabled="disabled"
        ></el-input>
        
        <!-- 下拉选择 -->
        <el-select
          v-if="field.type === 'select'"
          v-model="formData[field.prop]"
          :placeholder="'请选择' + field.label"
          :disabled="disabled"
          clearable
        >
          <el-option
            v-for="(option, optIndex) in field.selectList"
            :key="optIndex"
            :label="option.dictLabel"
            :value="option.dictCode"
            :disabled="disabled"
          ></el-option>
        </el-select>
        <el-input-number
          v-if="field.type === 'number'"
          v-model="formData[field.prop]"
          :min="0"
          label="描述文字"
          :disabled="disabled"
        ></el-input-number>
        <!-- 日期选择器 -->
        <el-date-picker
          v-if="field.type === 'date'"
          v-model="formData[field.prop]"
          :placeholder="'请选择' + field.label"
          :disabled="disabled"
          type="date"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        
        <!-- 日期时间选择器 -->
        <el-date-picker
          v-if="field.type === 'datetime'"
          v-model="formData[field.prop]"
          :placeholder="'请选择' + field.label"
          :disabled="disabled"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        <TheDeptSelect v-if="field.type == 'tree'" v-model="formData[field.prop]" :modelValue="formData[field.prop]" :deptType="field.value" placeholder="请选择所属班级"  :disabled="disabled" @update:modelValue="formData[field.prop] = $event"/>
        <!-- <Treeselect v-if="field.type == 'tree'" v-model="formData[field.prop]" :options="deptOptions" :show-count="true" :placeholder="'请输入' + field.label" :disabled="disabled"/> -->
        <FileUpload v-if="field.type == 'file'" v-model="formData[field.prop]" :disabled="disabled" :showTip="disabled" :fileInfo="formData[field.prop]=='resumeFileId'?formData.resumeFileList:formData.resultFileList"/>
      </el-form-item>
    </el-form>
    <div class="pageFooterBtn">
      <el-button @click="$router.back()">返回</el-button>
      <el-button type="primary" @click="handleSubmit()" v-if="['add','edit'].includes(action)" :loading="loading">提交</el-button>
    </div>
  </div>
</template>
<script>
import { rules, fields} from './data'
import { teachingResearchAddApi, teachingResearchEditApi, teachingResearchByIdApi } from '@/api/teachingResearchReform/teachingResearch'
import TheDeptSelect from '@/componentsView/TheDeptSelect.vue';
import FileUpload from "@/components/FileUpload";
export default {
  name: 'TeachingResearchDetail',
  components: { TheDeptSelect,FileUpload },
  data() {
    return {
      rules,
      fields,
      formData: {

      },
      loading:false,
      disabled:false,
      researchId: this.$route.query.researchId,
      action: this.$route.query.action,
      researchTypeId: this.$route.query.researchTypeId,
      researchStatus:{
        [83]:[
          {
            label:'立项中',
            value: 96,
          },
          {
            label:'研究中',
            value: 97,
          },
          {
            label:'结题待验收',
            value: 98,
          },
          {
            label:'已结题',
            value: 99,
          }
        ],
        [84]:[
          {
            label:'待审核',
            value: 100,
          },
          {
            label:'已发表',
            value: 101,
          },
          {
            label:'待归档',
            value: 102,
          }
        ],
        [85]:[
          {
            label:'待审核',
            value: 100,
          },
          {
            label:'已通过',
            value: 103,
          },
          {
            label:'参赛中',
            value: 104,
          },
          {
            label:'已完结',
            value: 105,
          }
        ],
        [86]:[
          {
            label:'申报中',
            value: 106,
          },
          {
            label:'立项中',
            value: 107,
          },
          {
            label:'研究中',
            value: 108,
          },
          {
            label:'结题中',
            value: 109,
          },
          {
            label:'已结题',
            value: 211,
          }
        ]
      },
    }
  },

  async created() {
    if (this.researchId) this.getById()
  },
  methods: {
    async handleSubmit() {
      try {
        await this.$refs.formRef.validate()
        this.loading = true
        let res = {}
        if (this.researchId) {
          delete this.formData.fileInfo
          res = await teachingResearchEditApi(this.formData)
        }else{
          this.formData.researchTypeId = Number(this.researchTypeId);
          this.formData.researchStatusId = this.researchStatus[this.formData.researchTypeId][0].value;
          this.formData.researchStatusName = this.researchStatus[this.formData.researchTypeId][0].label;
          if (!this.researchTypeId) return this.$message.error('返回上一页选择类型');
          res = await teachingResearchAddApi(this.formData)
        }
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.$router.back()
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      } catch (error) {
        this.$message.error('操作失败')
      } finally {
        this.loading = false
      }
    },

    async getById(){
      if (this.action === 'look') this.disabled = true
      teachingResearchByIdApi(this.researchId).then(res => {
        if (res.code === 200) {
          this.formData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    }
    
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-select {
	width: 100% !important;
}
::v-deep .el-date-editor{
  width: 100% !important;
}
::v-deep .el-input-number{
  width: 100% !important;
}
</style>